{{ header }}{{ column_left }} 
<div id="content"><div class="container-fluid">
	<div class="page-header">
	    <h1>Camera Slider</h1>
	    <ul class="breadcrumb">
		     {% for breadcrumb in breadcrumbs %} 
		      <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
		      {% endfor %} 
	    </ul>
	  </div>
    
    <link href='https://fonts.googleapis.com/css?family=Poppins:700,600,500,400,300' rel='stylesheet' type='text/css'>

	{% if (error_warning) %} 
		<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }} 
		  <button type="button" class="close" data-dismiss="alert">&times;</button>
		</div>
	  {% else %} 
	  {% if (success) %} 
	  <div class="alert alert-success"><i class="fa fa-exclamation-circle"></i> {{ success }} 
	    <button type="button" class="close" data-dismiss="alert">&times;</button>
	  </div>
	  {% endif %} {% endif %} 

	<!-- Camera slider -->
	<div class="set-size" id="camera-slider">		
		<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form">
			<!-- Content -->
			<div class="content">
				<div>
					<div class="bg-tabs clearfix">
						<div id="tabs">
                            <a href="{{ placement }}" id="placement" class="active"><span>Module<br> placement</span></a>
							<a href="{{ existing }}" id="existing"><span>Existing<br> modules</span></a>
						</div>

						<div class="tab-content2">
							<table id="module-placement">
								<thead>
									<tr>
										<td class="first">Slider</td>
										<td>Layout</td>
										<td>Position</td>
										<td>Sort Order</td>
										<td>Status</td>
										<td>Delete</td>
									</tr>
								</thead>
								{% set module_row = 0 %} {% if (modules != '') %} 
									{% for module in modules %} 
									<tbody id="module{{ module_row }}">
										<tr>
											<td class="first">
												<select name="camera_slider_module[{{ module_row }}][slider_id]">
													{% for slider in sliders %} 
													<option value="{{ slider['id'] }}" {% if (module['slider_id'] == slider['id']) %} {{ 'selected="selected"' }} {% endif %}>{{ slider['name'] }}</option>
													{% endfor %} 
												</select>
											</td>
											<td>
												<select name="camera_slider_module[{{ module_row }}][layout_id]">
													{% if (99999 == module['layout_id']) %} 
													<option value="99999" selected="selected">All pages</option>
													{% else %} 
													<option value="99999">All pages</option>
													{% endif %} 
													{% for layout in layouts %} 
													{% if (layout['layout_id'] == module['layout_id']) %} 
													<option value="{{ layout['layout_id'] }}" selected="selected">{{ layout['name'] }}</option>
													{% else %} 
													<option value="{{ layout['layout_id'] }}">{{ layout['name'] }}</option>
													{% endif %} 
													{% endfor %} 
												</select>
											</td>
											<td>
												<select name="camera_slider_module[{{ module_row }}][position]">
													{% if (module['position'] == 'menu') %} 
													<option value="menu" selected="selected">Menu</option>
													{% else %} 
													<option value="menu">Menu</option>
													{% endif %} 
													{% if (module['position'] == 'slideshow') %} 
													<option value="slideshow" selected="selected">Slideshow</option>
													{% else %} 
													<option value="slideshow">Slideshow</option>
													{% endif %} 
													{% if (module['position'] == 'preface_left') %} 
													<option value="preface_left" selected="selected">Preface left</option>
													{% else %} 
													<option value="preface_left">Preface left</option>
													{% endif %} 
													{% if (module['position'] == 'preface_right') %} 
													<option value="preface_right" selected="selected">Preface right</option>
													{% else %} 
													<option value="preface_right">Preface right</option>
													{% endif %} 
													{% if (module['position'] == 'preface_fullwidth') %} 
													<option value="preface_fullwidth" selected="selected">Preface fullwidth</option>
													{% else %} 
													<option value="preface_fullwidth">Preface fullwidth</option>
													{% endif %} 
													{% if (module['position'] == 'column_left') %} 
													<option value="column_left" selected="selected">Column left</option>
													{% else %} 
													<option value="column_left">Column left</option>
													{% endif %} 
													{% if (module['position'] == 'content_big_column') %} 
													<option value="content_big_column" selected="selected">Content big column</option>
													{% else %} 
													<option value="content_big_column">Content big column</option>
													{% endif %} 
													{% if (module['position'] == 'content_top') %} 
													<option value="content_top" selected="selected">Content top</option>
													{% else %} 
													<option value="content_top">Content top</option>
													{% endif %} 
													{% if (module['position'] == 'column_right') %} 
													<option value="column_right" selected="selected">Column right</option>
													{% else %} 
													<option value="column_right">Column right</option>
													{% endif %} 
													{% if (module['position'] == 'content_bottom') %} 
													<option value="content_bottom" selected="selected">Content bottom</option>
													{% else %} 
													<option value="content_bottom">Content bottom</option>
													{% endif %} 
													{% if (module['position'] == 'customfooter_top') %} 
													<option value="customfooter_top" selected="selected">CustomFooter Top</option>
													{% else %} 
													<option value="customfooter_top">CustomFooter Top</option>
													{% endif %} 
													{% if (module['position'] == 'customfooter_bottom') %} 
													<option value="customfooter_bottom" selected="selected">CustomFooter Bottom</option>
													{% else %} 
													<option value="customfooter_bottom">CustomFooter Bottom</option>
													{% endif %} 
													{% if (module['position'] == 'footer_top') %} 
													<option value="footer_top" selected="selected">Footer top</option>
													{% else %} 
													<option value="footer_top">Footer top</option>
													{% endif %} 
													{% if (module['position'] == 'footer_left') %} 
													<option value="footer_left" selected="selected">Footer left</option>
													{% else %} 
													<option value="footer_left">Footer left</option>
													{% endif %} 
													{% if (module['position'] == 'footer_right') %} 
													<option value="footer_right" selected="selected">Footer right</option>
													{% else %} 
													<option value="footer_right">Footer right</option>
													{% endif %} 
													{% if (module['position'] == 'footer_bottom') %} 
													<option value="footer_bottom" selected="selected">Footer bottom</option>
													{% else %} 
													<option value="footer_bottom">Footer bottom</option>
													{% endif %} 
													{% if (module['position'] == 'bottom') %} 
													<option value="bottom" selected="selected">Bottom</option>
													{% else %} 
													<option value="bottom">Bottom</option>
													{% endif %} 
												</select>
											</td>
											<td>
												<input type="text" class="sort" name="camera_slider_module[{{ module_row }}][sort_order]" value="{{ module['sort_order'] }}">
											</td>
											<td>
												{% if (module['status'] is defined) %} 
													{% if (module['status'] == 0 and module['status'] != '') %} {{ '<div class="status status-off" title="0" rel="module_'~module_row~'_status"></div>' }} {% else %} {{ '<div class="status status-on" title="1" rel="module_'~module_row~'_status"></div>' }} {% endif %} 
												{% else %} {{ '<div class="status status-off" title="0" rel="module_'~module_row~'_status"></div>' }} {% endif %} 
												<input name="camera_slider_module[{{ module_row }}][status]" value="{% if (module['status'] is defined) %} {{ module['status'] }} {% else %} {{ '0' }} {% endif %}" id="module_{{ module_row }}_status" type="hidden" />
											</td>
											<td>
												<a onclick="$('#module{{ module_row }}').remove();">Remove</a>
											</td>
										</tr>
									</tbody>
									{% set module_row = module_row + 1 %} {% endfor %} 
								{% endif %} 
								<tfoot></tfoot>
							</table>
							
							<a onclick="addModule();" class="add-module"><span>Add<br> item</span></a>
							
							<script type="text/javascript"><!--
							var module_row = {{ module_row }};
							
							function addModule() {
								html  = '<tbody id="module' + module_row + '">';
								html += '  <tr>';
								html += '    <td class="first">';
								html += '		<select name="camera_slider_module[' + module_row + '][slider_id]">';
								{% for slider in sliders %} 
								html += '			<option value="{{ slider['id'] }}">{{ slider['name'] }}</option>';
								{% endfor %} 
								html += '		</select>';
								html += '    </td>';
								html += '    <td>';
								html += '		<select name="camera_slider_module[' + module_row + '][layout_id]">';
								html += '			<option value="99999">All pages</option>';
								{% for layout in layouts %} 
								html += '           <option value="{{ layout['layout_id'] }}">{{ layout['name']|e('html') }}</option>';
								{% endfor %} 
								html += '		</select>';
								html += '    </td>';
								html += '    <td>';
								html += '		<select name="camera_slider_module[' + module_row + '][position]">';
								html += '       		<option value="menu">Menu</option>';
								html += '				<option value="slideshow">Slideshow</option>';
								html += '			    <option value="breadcrumb_top">Breadcrumb top</option>';
								html += '				<option value="breadcrumb_bottom">Breadcrumb bottom</option>';
								html += '				<option value="preface_left">Preface left</option>';
								html += '				<option value="preface_right">Preface right</option>';
								html += '				<option value="preface_fullwidth">Preface fullwidth</option>';
								html += '				<option value="column_left">Column left</option>';
								html += '				<option value="content_big_column">Content big column</option>';
								html += '				<option value="content_top">Content top</option>';
								html += '				<option value="column_right">Column right</option>';
								html += '				<option value="content_bottom">Content bottom</option>';
								html += '				<option value="customfooter_top">CustomFooter Top</option>';
								html += '				<option value="customfooter_bottom">CustomFooter Bottom</option>';
								html += '				<option value="footer_top">Footer top</option>';
								html += '				<option value="footer_left">Footer left</option>';
								html += '				<option value="footer_right">Footer right</option>';
								html += '				<option value="footer_bottom">Footer bottom</option>';
								html += '				<option value="bottom">Bottom</option>';
								html += '		</select>';
								html += '    </td>';
								html += '    <td>';
								html += '		<input type="text" class="sort" name="camera_slider_module[' + module_row + '][sort_order]">';
								html += '    </td>';
								html += '    <td>';
								html += '		<div class="status status-off" title="0" rel="module_' + module_row + '_status"></div><input name="camera_slider_module[' + module_row + '][status]" value="0" id="module_' + module_row + '_status" type="hidden" />';
								html += '    </td>';
								html += '    <td><a onclick="$(\'#module' + module_row + '\').remove();">Remove</a></td>';
								html += '  </tr>';
								html += '</tbody>';
								
								$('#module-placement tfoot').before(html);
								
								module_row++;
							}
							//--></script> 
						</div>
					</div>
					
					<div>
						<!-- Buttons -->
						<div class="buttons"><input type="submit" name="button-save" class="button-save" value=""></div>
					</div>
				</div>
			</div>		
		</form>
	</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
	
	$('#module-placement').on('click', '.status', function () {
		
		var styl = $(this).attr("rel");
		var co = $(this).attr("title");
		
		if(co == 1) {
		
			$(this).removeClass('status-on');
			$(this).addClass('status-off');
			$(this).attr("title", "0");

			$("#"+styl+"").val(0);
		
		}
		
		if(co == 0) {
		
			$(this).addClass('status-on');
			$(this).removeClass('status-off');
			$(this).attr("title", "1");

			$("#"+styl+"").val(1);
		
		}
		
	});

});	
</script>
{{ footer }}